<!DOCTYPE html>
<html lang="en"><!-- See http://www.w3schools.com/tags/ref_language_codes.asp -->
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>XX-Net</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-responsive.css">
    <link rel="stylesheet" type="text/css" href="/css/flat-ui.css">
    <link rel="stylesheet" type="text/css" href="/css/ladda-themeless.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css?ver=%s">
    <!-- JavaScript -->
    <script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/flat-ui.min.js"></script>
    <script type="text/javascript" src="/js/jquery.timer.js"></script>
    <script type="text/javascript" src="/js/spin.min.js"></script>
    <script type="text/javascript" src="/js/ladda.min.js"></script>
    <script type="text/javascript" src="/js/site.js?ver=%s"></script>
    <!--[if lte IE 9]>
        <script type="text/javascript" src="/js/jquery.placeholder.min.js"></script>
        <script type="text/javascript" src="/js/jquery.xdomainrequest.min.js"></script>
    <![endif]-->
</head>
<script type="text/javascript">
    var documentReadyToRun = new Array();
</script>
<body>
    <div id="header" class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <div class="row-fluid">
                    <div id="logo" class="span8">
                        <a href="/" title="XX-Net">
                            <img src="/img/logo.png" alt="Logo"></img>
                            XX-Net
                            <span id="version_on_logo" class="" ></span>
                        </a>
                        <a id="remote-connection-identifier" style="display: none;" href="/?module=launcher&menu=config">{{ _( "(Remote Web Control Enabled)" ) }}</a>
                    </div> <!-- #logo -->
                    <div class="span4 text-right">
                        <ul class="inline">
                            <li>
                                <a id="resize-window-trigger" href="javascript:void(0);" title='{{ _( "Adaptive width" ) }}'>
                                    <img src="/img/fixed-width.png" alt="resize-window">
                                </a>
                            </li>
                            <li>
                                <a id="quit-trigger" href="javascript:void(0);" title='{{ _( "Exit the program" ) }}'>
                                    <img src="/img/quit.png" alt="quit">
                                </a>
                            </li>
                        </ul>
                    </div> <!-- .span4 -->
                </div> <!-- .row-fluid -->
            </div> <!-- .container -->
        </div> <!-- .navbar-inner -->
    </div> <!-- #header -->
    <div id="content">
        <div class="container">
            <div class="row-fluid">
                <div id="sidebar" class="span3">
                    <div class="sidebar-nav well">
                        <ul class="nav nav-list">%s</ul>
                    </div> <!-- .sidebar-nav -->
                </div> <!-- #sidebar -->
                <div class="span9">
                    <div id="update-notify" class="alert fade in hide">
                        <span id="update-notify-close">×</span>
                        <span id="update-now" class="update-notify-action">{{ _( "Update now" ) }}</span>
                        <span id="update-next" class="update-notify-action">{{ _( "Remind me later" ) }}</span>
                        <span id="update-skip" class="update-notify-action">{{ _( "Do not remind me this version" ) }}</span>
                        <span id="update-message"></span>
                        <span> &nbsp; <a id="update-viewchanges" target="_blank">{{ _( "View changes" ) }}</a></span>
                    </div> <!-- #update-notify -->
                    <div id="update-progress-bar" class="popnotify fade in hide">
                        <span class=""></span>
                    </div><!-- #update-progress-bar -->
                    <h2 id="title"></h2>
                    <div id="tip" class="alert fade in hide">
                        <button id="tip-close" type="button" class="close">×</button>
                        <p id="tip-message" class="message"></p>
                    </div> <!-- #tip -->
                    %s
                </div>
            </div> <!-- .row-fluid -->
        </div> <!-- .container -->
    </div> <!-- #content -->
    <!-- JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript">
        $(function() {
            window.isFullWidth = false;
        });
    </script>
    <script type="text/javascript">
        $('#resize-window-trigger').click(function() {
            isFullWidth = !isFullWidth;

            if ( isFullWidth ) {
                $('img', this).attr('src', '/img/full-width.png');
                $('.container').addClass('container-fluid');
                $('.container').removeClass('container');
            } else {
                $('img', this).attr('src', '/img/fixed-width.png');
                $('.container-fluid').addClass('container');
                $('.container-fluid').removeClass('container-fluid');
            }
        });
    </script>
    <script type="text/javascript">
        var pageRequests = {};
        pageRequests['cmd'] = 'get_version';
        $.ajax({
            type: 'GET',
            url: '/config',
            data: pageRequests,
            dataType: 'JSON',
            success: function(result) {
                document.getElementById("version_on_logo").appendChild(document.createTextNode(result['current_version']));
                
            }
        });
    </script>
    <script type="text/javascript">
        $('#quit-trigger').click(function() {
            $.ajax({
                type: 'GET',
                url: '/quit',
                dataType: 'JSON',
                success: function(result) {
                    if ( result['status'] == 'success' ) {
                        tip('{{ _( "Exited successfully" ) }}', 'success');
                    } else {
                        tip('{{ _( "Exitting failed" ) }}', 'error');
                    }
                },
                error: function() {
                    tip('{{ _( "Exitting failed. A network error occurred." ) }}', 'error');
                }
            });
        });
    </script>
    <script type="text/javascript">
        var pageRequests = {
            'cmd': 'get_config'
        };

        $.ajax({
            type: 'GET',
            url: '/config',
            data: pageRequests,
            dataType: 'JSON',
            success: function(result) {
                if ( result['allow_remote_connect'] != 0 ) {
                    $('#remote-connection-identifier').show();
                }
            }
        });
    </script>
    <script type="text/javascript">
        var checkUpdateTimeout = 600000;
        var checkUpdateTimer;
        var versionToUpdate;
        var versionType;

        function displayErrorMessage() {
            tip('{{ _( "Unkown error occured. Please refresh the page and try again" ) }}', 'error');
        }

        function clearProgressBar() {
            $('#update-progress-bar').addClass('hide');
        }

        function startUpdateCheck() {
            $('#update-notify').addClass('hide');
            var pageRequests = {};
            pageRequests['cmd'] = 'start_check';
            check_update = $('#check-update').val();
            if ( !check_update ) {
                check_update = '';
            }
            pageRequests['check_update'] = check_update;

            $.ajax({
                type: 'GET',
                url: '/update',
                data: pageRequests,
                dataType: 'JSON',
                success: function(result) {
                    if ( result['res'] == 'success' ) {
                        getUpdateInfo();
                        checkUpdateTimer.play();
                    } else {
                        tip( result['reason'], "warning");
                    }
                },
                error: function() {
                    displayErrorMessage();
                }
            });
        }

        function stopUpdateCheck() {
            $('#update-notify').addClass('hide');
            checkUpdateTimer.stop();
            var pageRequests = {};
            pageRequests['cmd'] = 'set_info';
            pageRequests['info'] = 'dont-check';

            $.ajax({
                type: 'GET',
                url: '/update',
                data: pageRequests,
                dataType: 'JSON',
                success: function(result) {
                    if ( result['res'] != 'success' ) {
                        tip( result['reason'], "warning");
                    }
                },
                error: function() {
                    displayErrorMessage();
                }
            });
        }

        function clearUpdateInfo() {
            $('#update-notify').addClass('hide');
            var pageRequests = {};
            pageRequests['cmd'] = 'set_info';
            pageRequests['info'] = '';

            $.ajax({
                type: 'GET',
                url: '/update',
                data: pageRequests,
                dataType: 'JSON',
                success: function(result) {
                    if ( result['res'] != 'success' ) {
                        tip( result['reason'], "warning");
                    }
                },
                error: function() {
                    displayErrorMessage();
                }
            });
        }

        function skipUpdateVersion() {
            $('#update-notify').addClass('hide');
            checkUpdateTimer.stop();
            var pageRequests = {};
            pageRequests['cmd'] = 'set_config';
            pageRequests['skip_version'] = versionToUpdate;
            pageRequests['skip_version_type'] = versionType;

            $.ajax({
                type: 'GET',
                url: '/config',
                data: pageRequests,
                dataType: 'JSON',
                success: function(result) {
                    if ( result['res'] != 'success' ) {
                        tip( result['reason'], "warning");
                    }
                },
                error: function() {
                    displayErrorMessage();
                }
            });
        }

        function updateVersion() {
            $('#update-notify').addClass('hide');
            var pageRequests = {};
            pageRequests['cmd'] = 'update_version';
            pageRequests['version'] = versionToUpdate;
            versionToUpdate = null;

            $.ajax({
                type: 'GET',
                url: '/update',
                data: pageRequests,
                dataType: 'JSON',
                success: function(result) {
                    if ( result['res'] == 'success' ) {
                        tip( '{{ _( "Updating in progress ..." ) }}', "info");
                        window.updateProgress_timer.play();
                    } else {
                        tip( result['reason'], "warning");
                    }
                },
                error: function() {
                    displayErrorMessage();
                }
            });
        }

        function getUpdateInfo() {
            if ( !$('#update-notify').hasClass('hide') ||
                 !$('#update-progress-bar').hasClass('hide')) {
                return;
            }

            var pageRequests = {};
            pageRequests['cmd'] = 'get_info';

            $.ajax({
                type: 'GET',
                url: '/update',
                data: pageRequests,
                dataType: 'JSON',
                success: function(result) {
                    versionType = result['type'];
                    switch ( versionType ) {
                    case 'init':
                        window.setTimeout(startUpdateCheck, 1000);
                        break;
                    case 'dont-check':
                        stopUpdateCheck();
                        break;
                    default:
                        versionToUpdate = result['version'];
                        if ( versionType && versionToUpdate ) {
                            switch ( versionType ) {
                            case 'stable':
                                var popText = '{{ _( "New " ) }}{{ _( "Stable version" ) }} ' + versionToUpdate;
                                break;
                            case 'test':
                                var popText = '{{ _( "New " ) }}{{ _( "Test version" ) }} ' + versionToUpdate;
                            }
                            $('#update-message').text(popText);
                            $('#update-viewchanges').attr( "href", "https://github.com/XX-net/XX-Net/releases/tag/" + versionToUpdate );
                            $('#update-notify').removeClass('hide');
                        }
                    }
                }
            });
        }

        function updateProgress(){
            $.getJSON('update?cmd=get_progress', function (rst) {
                Object.keys(rst).forEach(function (v) {
                    if ( v == "update_status"){
                        var stat = rst[v];

                        if ( stat === "Idle"){
                            window.updateProgress_timer.stop();
                            return;
                        }

                        if ( $('#upgrade-pull-icon').hasClass('icon-chevron-right') ){
                            var current_version = $('#current-version-no').html();
                            if ( current_version == "" ){
                                $('#current-version-no').html(" ");
                                // avoid check next time.

                                check_new_version();
                            }

                            $('.version-line').slideDown('fast');

                            $('#upgrade-pull-icon').removeClass('icon-chevron-right');
                            $('#upgrade-pull-icon').addClass('icon-chevron-down');
                            $('#update-options').slideDown();
                        }

                        if( stat == "Finished"){
                            tip( stat, 'info');
                            window.loading.stop();
                            window.updateProgress_timer.stop();
                            return;
                        }else if ( stat.indexOf('Fail') > -1){
                            tip( stat, 'warning');
                            window.updateProgress_timer.stop();
                        }else{
                            tip( stat, 'info');
                        }
                    }else if (v.indexOf('XX-Net/zip') > -1) {
                        if (!window.updating_button){
                            var p = v.indexOf('XX-Net/zip') + 11;
                            var version = v.substring(p, v.length);
                            var button;
                            if ( version == $('#test-version-no').html() ){
                                button = $('#update-test-version');
                            }else if ( version == $('#stable-version-no').html() ){
                                button = $('#update-stable-version');
                            }else if ( $('.active a').attr('href') == '/?module=launcher&menu=config' ) {
                                return;
                            }else{
                                button = $('#update-progress-bar span');
                                $('#update-progress-bar').removeClass('hide');
                            }
                            window.updating_button = button;
                        }
                        $('#update-notify').addClass('hide');

                        if (!window.loading){
                            window.loading = Ladda.create(window.updating_button[0]);
                            window.loading.start();
                        }
                        var data = rst[v];
                        if ( data.status === 'downloading'){
                            var progress =  (+data.downloaded / +data.size) * 100 ;

                            window.loading.setProgress(progress);
                            window.updating_button.html('{{ _( "Downloading ..." ) }}' + parseInt(progress) + '&#37;');
                        }else if (data.status === "finished"){
                            window.updating_button.html( '{{ _( "Download completed" ) }}');
                            window.updating_button.prop('disabled', true);
                            window.updating_button = null;
                            window.setTimeout(clearProgressBar, 5000);
                            window.loading.stop();
                            window.updateProgress_timer.stop();
                        }
                    }
                });
            });
        }

        $(document).ready(function(){
            var rfn;
            for ( rfn in documentReadyToRun ) {
                documentReadyToRun[rfn]();
            }
            window.updateProgress_timer = $.timer(updateProgress, 1000, true);
            updateProgress();
            checkUpdateTimer = $.timer(getUpdateInfo, checkUpdateTimeout, true);
            window.setTimeout(getUpdateInfo, 1000);
        });

        $('#update-now').click(updateVersion);
        $('#update-next').click(clearUpdateInfo);
        $('#update-skip').click(skipUpdateVersion);
        $('#update-notify-close').click(clearUpdateInfo);
        // site.js fix
        $('#tip-close').click(tipClose);
    </script>
    <script type="text/javascript">
        //pop up notify on top of status web page.
        function popup_notify(text,linkText,linkHref,open_in_newtab,bcolor)
        {
            var notify_area = document.getElementById("notify-area");
            
            //create new div for notify
            var newdiv = notify_area.appendChild(document.createElement("div"));
            newdiv.className = "popnotify";
            if(bcolor != "")
            {
                newdiv.style.backgroundColor=bcolor;
            }
            
            //in new div create span as notify text
            var notify_text_span = newdiv.appendChild(document.createElement("span"));
            //write the notify text in
            notify_text_span.appendChild(document.createTextNode(text));
            notify_text_span.className = "popnotify-text";
            
            //in new div create span as link
            var notify_link_span = newdiv.appendChild(document.createElement("span"));
            notify_link_span.className = "popnotify-text";
            //in link span create link
            var notify_link = notify_link_span.appendChild(document.createElement("a"));
            if(linkHref)
            {
                //write link address in
                notify_link.href = linkHref;
            }
            else
                notify_link.href = "#"; //go nowhere
            if(open_in_newtab)
            {
                notify_link.target = "_blank";
            }
            //write link text in
            notify_link.appendChild(document.createTextNode(linkText));
            
            //create close notify button
            var notify_close_btn = newdiv.appendChild(document.createElement("span"));
            notify_close_btn.className = "popnotify-close-btn";
            notify_close_btn.appendChild(document.createTextNode("×"));
            notify_close_btn.style = "float:right; cursor: pointer;";
            notify_close_btn.onclick = function()
            {
                //close this popup
                notify_area.removeChild(this.parentNode);
            }
            //return the link object , can be used as button
            return notify_link_span;
        }
        //Examples .  uncomment to see .
        /*
        var aaa = popup_notify("This is notify example. ","click text");
        aaa.onclick = function() { alert('hello'); } 
        popup_notify("This is notify example 2 . ", "","","", "yellow");
        popup_notify("This is notify example 3 . ","Link text","whereDoWeGo",1,"#dddddd");
        */
    </script>
</body>
</html>
